<template>
  <view class="product-review-page">
    <!-- 商品信息区域 -->
    <view class="product-info-section">
      <view class="product-card">
        <view class="product-image">
          <image :src="product.image" :alt="product.title" />
        </view>
        <view class="product-details">
          <text class="product-title">{{ product.title }}</text>
          <text class="product-subtitle">{{ product.subtitle }}</text>
      
        </view>
		<view class="product-price">
		  <text class="current-price">¥{{ product.currentPrice }}</text>
		  <text class="original-price">¥{{ product.originalPrice }}</text>
		</view>
      </view>
    </view>

    <!-- 评论区域 -->
    <view class="comments-section">
      <view class="comments-header">
        <text class="comments-count">共{{ comments.length }}条留言</text>
      </view>

      <!-- 评论列表 -->
      <view class="comments-list">
        <view 
          class="comment-item" 
          v-for="(comment, index) in comments" 
          :key="index"
        >
          <view class="comment-avatar">
            <image :src="comment.avatar" :alt="comment.username" />
          </view>
          <view class="comment-content">
            <view class="comment-header">
              <text class="username">{{ comment.username }}</text>
              <text class="timestamp">{{ comment.timestamp }}</text>
            </view>
            <text class="comment-text">{{ comment.content }}</text>
          </view>
        </view>
      </view>

      <!-- 没有更多评论 -->
      <view class="no-more-comments">
        <text class="no-more-text">没有更多了</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 商品信息
      product: {
        id: 1,
        title: "闲置高级花花本",
        subtitle: "意大利超火的小面条馆",
        currentPrice: "89",
        originalPrice: "120",
        image: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
      },
      
      // 评论数据
      comments: [
        {
          id: 1,
          username: "潇洒人生",
          timestamp: "12-21 15:23",
          content: "2018已经过去了大半,在经历了3年前的扁平化设计风潮,还有谷歌公司引领的卡片式设计,或者称质感设计。",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 2,
          username: "窝里小白杨",
          timestamp: "12-21 15:23",
          content: "流行词有下拉式界面,复古色,界面分割等",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 3,
          username: "设计达人",
          timestamp: "12-20 14:30",
          content: "这个商品质量很好，设计也很精美，值得推荐给大家。",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        },
        {
          id: 4,
          username: "时尚潮人",
          timestamp: "12-19 16:45",
          content: "颜色很正，材质也不错，性价比很高的一款产品。",
          avatar: "http://img.1637.com/2015/07/10/YZS1VNIJE3HR504910.jpg"
        }
      ]
    }
  },
  methods: {
    // 这里可以添加更多方法
  }
}
</script>

<style lang="scss" scoped>
.product-review-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.product-info-section {
  background: white;
  padding: 40rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);

  .product-card {
    display: flex;
    // align-items: center;
    gap: 24rpx;

    .product-image {
      width: 160rpx;
      height: 160rpx;
      border-radius: 16rpx;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .product-details {
      flex: 1;

      .product-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #2E343A ;
        margin-bottom: 12rpx;
        display: block;
        line-height: 1.4;
      }

      .product-subtitle {
        font-size: 26rpx;
        color: #9098A0;
        margin-bottom: 16rpx;
        display: block;
      }

    
    }
	.product-price {
	    display: flex;
	    // align-items: center;
	    // gap: 16rpx;
		flex-direction: column; /* 垂直排列子元素 */
		align-items: center; /* 子元素水平居中 */
	    .current-price {
	      font-size: 32rpx;
	      font-weight: 600;
	      color: #ED6567;
	    }
	
	    .original-price {
	      font-size: 24rpx;
	      color: #999;
	      text-decoration: line-through;
	    }
	  }
  }
}

.comments-section {
  background: white;
  padding: 40rpx;

  .comments-header {
    margin-bottom: 30rpx;

    .comments-count {
		
      font-weight: 500;
	  color:#0B1526;
	  font-size: 40rpx;
    }
  }

  .comments-list {
    .comment-item {
      display: flex;
      margin-bottom: 40rpx;
      padding-bottom: 40rpx;
      border-bottom: 2rpx solid #f0f0f0;

      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }

      .comment-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 24rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .comment-content {
        flex: 1;
		
        .comment-header {
          display: flex;
          // align-items: center;
          justify-content: space-between;
          margin-bottom: 12rpx;
		  flex-direction: column;
			
          .username {
            font-size: 28rpx;
            color: #0B1526;
            font-weight: 500;
          }

          .timestamp {
            font-size: 24rpx;
            color: #8D93A6;
          }
        }

        .comment-text {
          font-size: 28rpx;
          color: #0B1526;
          line-height: 1.6;
          display: block;
        }
      }
    }
  }

  .no-more-comments {
    text-align: center;
    padding: 40rpx 0;

    .no-more-text {
      font-size: 24rpx;
      color: #999;
    }
  }
}
</style>